<template>
  <view class="auth-box">
    <view class="btn-group">
      <!-- #ifdef MP-WEIXIN -->
      <u-button v-if="phoneBtn" class="authBtn" type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键登陆</u-button>
      <u-button v-else class="authBtn" disabled type="success" @tap="uni.$u.toast('登陆失败，联系管理员')">微信用户一键登陆</u-button>
      <!-- #endif -->
    </view>
    <view class="tip-box" @tap="readFlag = !readFlag">
      <checkbox :checked="readFlag" /> 若手机号未注册将进入注册流程，注册即视为同意<text>《服务条款》</text>和<text>《隐私策略》</text>
    </view>
  </view>
</template>

<script>
import { bindPhoneMall } from '@/api/auth'
export default {
  data() {
    return {
      readFlag: true,
      phoneBtn: true
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLogin() {
      return this.$store.getters.hasLogin
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  mounted() {
    // 进入App.vue的时候就获取loginCode->拿到appid进行登陆注册
    // 能进这个页面一定是没有拿到手机号
    // 如果还没有拿到手机号->根据loginCode绑定手机号与会员号(如果绑定手机号失败，抛出异常，屏蔽手机登陆按钮)
    if (!this.hasLogin) {
      this.phoneBtn = false
    }
  },
  methods: {
    getPhoneNumber(e) {
      const that = this
      if (!that.readFlag) {
        return uni.$u.toast('请先阅读并勾选协议')
      }
      const phoneCode = e.detail.code
      if (!e.detail.code) {
        // uni.showModal({
        //   title: '授权失败',
        //   content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
        //   cancelText: '知道了',
        //   confirmText: '验证登录',
        //   confirmColor: '#3C9CFFFF',
        //   success: res => {
        //     if (res.confirm) {
        //       uni.$u.route('/pages/users/login/userPassword')
        //     } else if (res.cancel) {
        //       // console.log('用户点击取消')
        //     }
        //   }
        // })
      } else {
        // 绑定手机 卡号
        bindPhoneMall(
          { state: 'MINI', phoneCode: phoneCode }
        ).then((res) => {
          console.log('登录成功', res)
          uni.$u.toast('登录成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 300)
        }).catch((err) => {
          console.log('登陆失败', err)
        })
        // uni.login({
        //   provider: 'weixin',
        //   success: res => {
        //     this.$store.dispatch('Login', {
        //       type: 2,
        //       data: {
        //         state: 'MINI',
        //         phoneCode: phoneCode,
        //         loginCode: res.code
        //       }
        //     }).then(res => {
        //       uni.$u.toast('登录成功')
        //       setTimeout(() => {
        //         // uni.switchTab({
        //         //   url: '/pages/user/user'
        //         // })
        //         // uni.reLaunch({ url: '/pages/index/index' })
        //         uni.navigateBack()
        //       }, 300)
        //     })
        //   }
        // })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.auth-box {
  .btn-group {
    margin-bottom: 20rpx;
    .authBtn {
      font-size: 32rpx;
    }
  }
  .tip-box {
    font-size: 24rpx;
    color: #888888;
    checkbox {
      transform: scale(0.7);
    }
    text {
      font-size: 24rpx;
      color: #ff0101;
    }
  }
}
</style>
